<!-- 分销账户：展示基本统计信息 -->
<template>
	<view class="account-card">
		<view class="account-card-box">
			<view class="ss-flex ss-row-between card-box-header">
				<view class="ss-flex">
					<view class="header-title ss-m-r-16">账户信息</view>
					<button class="ss-reset-button look-btn ss-flex" @tap="state.showMoney = !state.showMoney">
						<uni-icons :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'" color="#A57A55"
							size="20" />
					</button>
				</view>
				<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')"
					v-if="state.summary.type != BrokerageTypeEnum.DZ.type">
					<view class="header-title ss-m-r-4">查看明细</view>
					<text class="cicon-play-arrow" />
				</view>
			</view>

			<!-- 收益 -->
			<view class="card-content ss-flex">
				<view class="ss-flex-1 ss-flex-col ss-col-center">
					<view class="item-title">可提现佣金(元)</view>
					<view class="item-detail">
						{{ state.showMoney ? fen2yuan((state.summary.userPrice - state.summary.frozenPrice) || 0) : '***' }}
					</view>
				</view>
				<view class="ss-flex-1 ss-flex-col ss-col-center">
					<button class="ss-reset-button withdraw-btn" @tap="sheep.$router.go('/pages/commission/withdraw')">
						提现
					</button>
				</view>
				<view class="ss-flex-1 ss-flex-col ss-col-center">
					<view class="item-title">累计佣金(元)</view>
					<view class="item-detail">
						{{ state.showMoney ? fen2yuan(state.summary.userPrice || 0) : '***' }}
					</view>
				</view>
				<view class="ss-flex-1 ss-flex-col ss-col-center">
					<view class="item-title">已提现佣金(元)</view>
					<view class="item-detail">
						{{ state.showMoney ? fen2yuan(state.summary.price || 0) : '***' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed,
		reactive,
		onMounted,
		watch
	} from 'vue';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';
	import {
		BrokerageTypeEnum,
	} from '@/sheep/util/const';

	const userInfo = computed(() => sheep.$store('user').userInfo);

	const state = reactive({
		showMoney: false,
		summary: {},
	});

	const props = defineProps({
		detailData: {}
	})

	watch(props, () => {
		if (props.detailData) {
			Object.assign(state, {
				summary: props.detailData
			})
			console.log('账户信息：', state)
		}
	}, {
		deep: true,
		immediate: true,
	})
</script>

<style lang="scss" scoped>
	.account-card {
		width: 694rpx;
		margin: 0 auto;
		padding: 2rpx;
		background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
		border-radius: 12rpx;
		z-index: 3;
		position: relative;

		.account-card-box {
			background: #ffefd6;

			.card-box-header {
				padding: 0 30rpx;
				height: 72rpx;
				box-shadow: 0px 2px 6px #f2debe;

				.header-title {
					font-size: 24rpx;
					font-weight: 500;
					color: #a17545;
					line-height: 30rpx;
				}

				.cicon-play-arrow {
					color: #a17545;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}

			.card-content {
				height: 260rpx;
				background: #fdfae9;
				display: grid;
				grid-template-columns: 1fr 1fr;
				padding-bottom: 20rpx;


				.item-title {
					font-size: 24rpx;
					font-weight: 500;
					color: #cba67e;
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				.item-detail {
					font-size: 36rpx;
					font-family: OPPOSANS;
					font-weight: bold;
					color: #692e04;
					line-height: 30rpx;
				}

				.withdraw-btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30px;
					font-size: 24rpx;
					font-weight: 500;
					// background-color: $white;
					border: 1px solid #fbcf89;
					color: var(--ui-BG-Main);
				}
			}
		}
	}
</style>